<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3 v-bind 属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：HTML插值</h1>
            <h3>html插值可以动态的渲染DOM节点，常用来处理开发者不可预知和难以控制的DOM结构
                但它很容易形成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        
        <h1>知识点2：v-pre</h1>
            <h3>v-pre可以跳过其所在节点的编译过程，可以利用它跳过没有指令语法和插值语法的节点，加快编译速度</h3>    
            <span v-pre>{{price}}</span>   

        <h1>知识点3：v-bind 属性绑定</h1>
            <h3>1.文本插值不能在html元素的属性中使用，如果想要动态地改变属性，可以使用v-bind</h3>    
            <p>例子1：没有使用v-bind</p>
            <p title={{title}}>我没有进行属性绑定，请别touch me</p>
            
            <h3>2.v-bind可以绑定变量，表达式，执行函数等</h3>
            <p>例子2：使用v-bind</p>
            <p v-bind:title="title">我有进行属性绑定</p>
            <p>例子3：图片的动态绑定</p>
            <img v-bind:src="srcImg" alt="">
            <p>例子4：绑定变量和表达式</p>
            <button v-bind:disabled="10+10==20">点击有奖</button>

            <h3>3.因为v-bind 使用很多可以简写：</h3>
            <p :title="title">我是简写的属性绑定</p>
            <h3>课程实例：通过改变你type值，来实现文本框等等</h3>
            <input type="text">
            <input type="radio">
            <input type="checkbox">
            <h4>代码实现如下：</h4>
            <input :type="type">
            <button @click="change('text')">文本框</button>
            <button @click="change('radio')">单选框</button>
            <button @click="change('checkbox')">复选框</button>

        <h1>课堂练习：通过动态改变属性，完成字体大小和颜色的修改</h1>  
            <!-- <span style="color:red; font-size: 16px;">啊水晶粉丝hi奋斗十年花洒代发就死u搭嘎hius个iu啊自己很那</span> -->
            <span :style="{color:c, fontSize:s + 'px'}">啊水晶粉丝hi奋斗十年花洒代发就死u搭嘎hius个iu啊自己很那</span>
            
            <button @click="color('blue')">蓝色</button>
            <button @click="color('pink')">粉色</button>
            <button @click="color('yellow')">黄色</button>
            <button @click="color('orange')">橙色</button>
            <button @click="size(90)">大</button>
            <button @click="size(10)">小</button>
            
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data(){
            return{
                vh:"<span style='color:red'>red红</span>",
                price:10000,
                title:'别 touch me',
                srcImg:"./1.JPG",
                type:'text',
                s:16,
                c:'black'
                // styles:{
                //     colorName:black,
                //     fontSize:18
                    
                // }
            }
        },
        methods: {
            change(val){
                this.type = val
            },
            size(val){
                this.s = val
            },
            color(val){
                this.c = val
            }
            
        },
    }).mount("#app")
</script>